<page-header />

<mat-card>
  <mat-tab-group mat-stretch-tabs="false">
    <mat-tab label="Colors">
      <div class="row no-gutters">
        <div>
          <mat-list>
            <h3 matSubheader>Background/Border/Text Color</h3>
            @for (i of colorNames; track i) {
              <mat-list-item>
                <code>.[bg|border|text]-{{ i }}-[{{ colorHues }}]</code>
              </mat-list-item>
            }
            @for (c of ['white', 'black', 'light', 'dark']; track c) {
              <mat-list-item>
                <code>.[bg|border|text]-{{ c }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Layout">
      <div class="row no-gutters">
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Position</h3>
            @for (i of ['static', 'fixed', 'absolute', 'relative', 'sticky']; track i) {
              <mat-list-item>
                <code>.{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Display</h3>
            @for (
              i of ['block', 'inline-block', 'inline', 'flex', 'inline-flex', 'none'];
              track i
            ) {
              <mat-list-item>
                <code>.d-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Flexbox (Direction)</h3>
            @for (i of ['row', 'row-reverse', 'col', 'col-reverse']; track i) {
              <mat-list-item>
                <code>.flex-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Flexbox (Fill & Grow & shrink)</h3>
            <mat-list-item>
              <code>.flex-fill</code>
            </mat-list-item>
            @for (i of ['grow-0', 'grow-1']; track i) {
              <mat-list-item>
                <code>.flex-{{ i }}</code>
              </mat-list-item>
            }
            @for (i of ['shrink-0', 'shrink-1']; track i) {
              <mat-list-item>
                <code>.flex-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Flexbox (Wrap)</h3>
            @for (i of ['wrap', 'nowrap', 'wrap-reverse']; track i) {
              <mat-list-item>
                <code>.flex-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Flexbox (Justify content)</h3>
            @for (i of ['start', 'end', 'center', 'between', 'around']; track i) {
              <mat-list-item>
                <code>.justify-content-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Flexbox (Align content)</h3>
            @for (i of ['start', 'end', 'center', 'between', 'around', 'stretch']; track i) {
              <mat-list-item>
                <code>.align-content-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Flexbox (Align items)</h3>
            @for (i of ['start', 'end', 'center', 'baseline', 'stretch']; track i) {
              <mat-list-item>
                <code>.align-items-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Flexbox (Align self)</h3>
            @for (i of ['auto', 'start', 'end', 'center', 'baseline', 'stretch']; track i) {
              <mat-list-item>
                <code>.align-self-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Spacings">
      <div class="row no-gutters">
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Margin</h3>
            @for (i of [0, 4, 8, 16, 24, 32, 48, 'auto']; track i) {
              <mat-list-item>
                <code>.m[-[t|b|r|l|x|y]]-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Negative Margin</h3>
            @for (i of [4, 8, 16, 24, 32, 48]; track i) {
              <mat-list-item>
                <code>.m[-[t|b|r|l|x|y]]--{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Padding</h3>
            @for (i of [0, 4, 8, 16, 24, 32, 48]; track i) {
              <mat-list-item>
                <code>.p[-[t|b|r|l|x|y]]-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Gap</h3>
            @for (i of [0, 4, 8, 16, 24, 32, 48]; track i) {
              <mat-list-item>
                <code>.gap[-[t|b|r|l|x|y]]-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Border">
      <div class="row no-gutters">
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Border</h3>
            @for (i of [0, 1, 2, 3, 4, 5]; track i) {
              <mat-list-item>
                <code>.b[-[t|b|r|l|x|y]]-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Border Width</h3>
            @for (i of [0, 1, 2, 3, 4, 5]; track i) {
              <mat-list-item>
                <code>.border[-[t|b|r|l|x|y]]-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-12 col-md-6">
          <mat-list>
            <h3 matSubheader>Border Style</h3>
            @for (i of ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none']; track i) {
              <mat-list-item>
                <code>.border[-[t|b|r|l|x|y]]-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-12 col-md-6">
          <mat-list>
            <h3 matSubheader>Border Radius</h3>
            @for (i of [0, 4, 8, 16, 24, 32, 'full']; track i) {
              <mat-list-item>
                <code>.r[-[t|b]-[r|l]]-{{ i }}, r[-[t|b|l|r]]-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Size">
      <div class="row no-gutters">
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Width (%)</h3>
            @for (i of [20, 25, 40, 50, 60, 75, 80, 'full', 'auto']; track i) {
              <mat-list-item>
                <code>.w-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Height (%)</h3>
            @for (i of [20, 25, 40, 50, 60, 75, 80, 'full', 'auto']; track i) {
              <mat-list-item>
                <code>.h-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Text">
      <div class="row no-gutters">
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Font Weight</h3>
            @for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9]; track i) {
              <mat-list-item>
                <code>.f-w-{{ i * 100 }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Font Size</h3>
            @for (i of [0, 10, 12, 14, 16, 18, 20]; track i) {
              <mat-list-item>
                <code>.f-s-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Font Style</h3>
            <mat-list-item><code>.font-italic</code></mat-list-item>
            <mat-list-item><code>.font-normal</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Text Align</h3>
            <mat-list-item><code>.text-center</code></mat-list-item>
            <mat-list-item><code>.text-right</code></mat-list-item>
            <mat-list-item><code>.text-left</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Text Decoration</h3>
            <mat-list-item><code>.text-none</code></mat-list-item>
            <mat-list-item><code>.text-underline</code></mat-list-item>
            <mat-list-item><code>.text-line-through</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Text Transform</h3>
            <mat-list-item><code>.text-capitalize</code></mat-list-item>
            <mat-list-item><code>.text-uppercase</code></mat-list-item>
            <mat-list-item><code>.text-lowercase</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>White Space</h3>
            <mat-list-item><code>.text-normal</code></mat-list-item>
            <mat-list-item><code>.text-nowrap</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Word Wrap</h3>
            <mat-list-item><code>.text-break</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Text Overflow</h3>
            <mat-list-item><code>.text-ellipsis</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Color</h3>
            <mat-list-item><code>.text-reset</code></mat-list-item>
            <mat-list-item><code>.text-current</code></mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Misc">
      <div class="row no-gutters">
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Vertical Align</h3>
            @for (i of ['top', 'middle', 'bottom']; track i) {
              <mat-list-item>
                <code>.align-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Cursor</h3>
            @for (i of ['default', 'pointer', 'text', 'move', 'copy', 'not-allowed']; track i) {
              <mat-list-item>
                <code>.cursor-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>User Select</h3>
            @for (i of ['all', 'auto', 'none']; track i) {
              <mat-list-item>
                <code>.select-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Pointer Events</h3>
            <mat-list-item><code>.pointer-events-none</code></mat-list-item>
            <mat-list-item><code>.pointer-events-auto</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Overflow</h3>
            @for (i of ['auto', 'hidden', 'visible', 'scroll']; track i) {
              <mat-list-item>
                <code>.overflow[-[x|y]]-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Object Fit</h3>
            @for (i of ['cover', 'contain', 'fill', 'none', 'scale-down']; track i) {
              <mat-list-item>
                <code>.object-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Object Position</h3>
            @for (
              i of [
                'top',
                'bottom',
                'center',
                'left',
                'left-top',
                'left-right',
                'right',
                'right-top',
                'right-bottom',
              ];
              track i
            ) {
              <mat-list-item>
                <code>.object-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Icon Size</h3>
            @for (i of [18, 24, 36, 48]; track i) {
              <mat-list-item>
                <code>.icon-{{ i }}</code>
              </mat-list-item>
            }
          </mat-list>
        </div>
      </div>
    </mat-tab>
  </mat-tab-group>
</mat-card>
